<template>
  <!-- 订单详情界面 -->
  <div>
    <!-- 顶部导航栏 -->
    <div class="header">
      <van-sticky>
        <van-nav-bar title="订单详情" left-arrow @click-left="onClickLeft" />
      </van-sticky>
    </div>
    <div class="card">
      <van-card
        v-for="item in datailData"
        :key="item.id"
        :title="item.product.name"
        :desc="item.product.description"
        :price="item.product.price + '.00'"
        :thumb="item.product.photo"
        :num="item.number"
      />
    </div>
    <div class="van-divider"></div>
    <div class="count">
      <div slot="price">
        总计:<span style="color: red">{{ "¥" + order.total }}</span>
      </div>
    </div>
    <div class="van-divider"></div>
    <div class="address">
      <van-card>
        <div slot="desc">
          <span style="font-size:15px"
            >服务地址:{{
              order.address.province +
              order.address.city +
              order.address.area +
              order.address.address
            }}</span
          >
        </div>
        <div slot="desc">
          <span style="font-size:15px"
            >联系方式:{{ order.customer.username }}
            {{ "(" + order.customer.telephone + ")" }}</span
          >
        </div>
        <div slot="desc">
          <span style="font-size:15px">下单时间:{{ order.orderTime | dateFormat }}</span>
        </div>
        <div slot="desc">
          <span style="font-size:15px">服务时间:{{ order.serviceTime | dateFormat }}</span>
        </div>
      </van-card>
      <div class="foot">
        <div class="status">
          <span style="color: #ff00ff">{{ order.status }}</span>
        </div>
          <div class="buttom">
            <van-button
              color="#ff6633"
              round
              type="info"
              v-if="order.status == '待接单'"
              size="mini"
              @click="rejectorder"
              >拒绝接单</van-button
            >
            <van-button
              color="#9933FF"
              round
              type="info"
              v-if="order.status == '待接单'"
              size="mini"
              @click="takeorder"
              >确认接单</van-button
            >
            <van-button
              round
              type="info"
              v-if="order.status == '待服务'"
              size="mini"
              @click="onfirmorder"
              >结束服务</van-button
            >
          </div>
        
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      //    点击跳转到产品页面时传递的Id
      order: this.$route.query.order,
      datailData: this.$route.query.order.orderLines,
    };
  },
  methods: {
    ...mapActions("order", ["take", "reject", "onfirm"]),
    // 拒绝订单
    rejectorder() {
      this.reject({ orderId: this.order.id });
      this.$router.go(-1);
    },
    // 接受订单
    takeorder() {
      this.take({ orderId: this.order.id });
      this.$router.go(-1);
    },
    // 结束服务
    onfirmorder() {
      this.onfirm({ orderId: this.order.id });
      this.$router.go(-1);
    },
    // 返回上一个页面
    onClickLeft() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>

<style scoped>
.van-card {
  position: relative;
  box-sizing: border-box;
  padding: 8px 16px;
  font-size: 12px;
  background-color: #fafafa;
  margin: 0.5em;
  background-color: rgb(248，248, 248);
}
.count {
  text-align: right;
  color: #333;
  font-size: 12px;
  margin: 10px;
}
.header /deep/ .van-nav-bar__title {
  color: white !important;
  font-size: 16px;
}
.header /deep/ .van-nav-bar__text {
  font-size: 16px;
}
.header /deep/ .van-icon {
  color: white !important;
  font-size: 16px;
}
.van-divider {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 16px 0;
  color: #969799;
  font-size: 14px;
  line-height: 24px;
  border-color: #ebedf0;
  border-style: solid;
  border-width: 0;
}
.header /deep/ .van-nav-bar {
  height: 48px;
  background-image: linear-gradient(90deg, #bf73ff, #7579ff);
  text-align: center;
  line-height: 48px;
  letter-spacing: 0.4em;
}
.address {
  background-color: #f8f8f8;
  height: 150px;
}
.buttom {
  float: right;
  margin-right: 0.5em;
}
.status {
  float: left;
  margin-left: 1em;
}
</style>